<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('新增单位查询定义')" />
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-dwcxdy-add">
            <div class="form-group">    
                <label class="col-sm-3 control-label is-required">账本号：</label>
                <div class="col-sm-8">
                    <input name="zbh" class="form-control" type="text" maxlength="2" required>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label is-required">账本名称：</label>
                <div class="col-sm-8">
                    <input name="zbmc" class="form-control" type="text" required>
                </div>
            </div>
        </form>
    </div>
    <div class="container-div">
        <div class="btn-group-sm" id="toolbar" role="group">
             <a class="btn btn-success" onclick="insertRow()">
		            <i class="fa fa-plus"></i> 新增行
		        </a>
		        <a class="btn btn-danger multiple disabled" onclick="removeRow()">
		            <i class="fa fa-remove"></i> 删除选择行
		        </a>
        </div>
		<div class="row">
			<div class="col-sm-12 select-table">
				<table id="bootstrap-table"></table>
			</div>
		</div>
	</div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: bootstrap-table-editable-js" />
    <script th:inline="javascript">
        var prefix = ctx + "system/dwcxdy"
        $("#form-dwcxdy-add").validate({
            focusCleanup: true
        });

        function submitHandler() { 
	        if ($.validate.form()) {
	        	var data = $("#form-dwcxdy-add").serializeArray();
	        	var itemmx = $("#" + table.options.id).bootstrapTable('getData');
	        	if(itemmx.length == 0){
	        		 layer.alert("<font color='red'>请录入明细信息</font>", {
	        		        icon: 0,
	        		        title: "系统提示"
	        		 })
	        		 return;
	        		
	        	}
	        	var dateIds = new Array();
	        	var itemje=0;
	        	$.each(itemmx, function (key, value) {
                     if (value.xh==''){
                    	 dateIds.push("1");
                    	 return false; 
                     }
                     if (value.xsmc==''){
                    	 dateIds.push("1");
                    	 return false; 
                     }
                    /* if (value.sfxs==''){
                    	 dateIds.push("1");
                    	 return false; 
                     }
                     if (value.sjlx==''){
                    	 dateIds.push("1");
                    	 return false; 
                     }
                     */
                     if (value.rule==''){
                    	 dateIds.push("1");
                    	 return false; 
                     }
                 });
	        	if(dateIds.length>0){
	        		 layer.alert("<font color='red'>明细信息不正确!</font>", {
	        		        icon: 0,
	        		        title: "系统提示"
	        		 })
	        		 return;
	        	}
	        	
	        	var jsonitemmx=JSON.stringify(itemmx)
	        	data.push({"name": "params[mx]", "value": jsonitemmx});
	        	$.operate.save(prefix + "/add", data);
	        }
	    }
        $(function() {
	        var options = {
        		showSearch: false,
		        showRefresh: false,
		        showToggle: false,
		        showColumns: false,
		        pagination: false,
		        striped : true,
		        uniqueId: 'xh',
		        height: 220,
		        editable:true,//开启编辑模式  
		        clickToSelect: true,
	            columns: [{
		            checkbox: true
		        },
				{
					field : 'xh', 
					title : '序号',
				}, {
                    field: 'xsmc',
                    title: '显示名称',
                    width :200,
					editable : {
						type : 'text',
						title : '显示名称',
						emptytext : "录入显示名称",
						mode: "inline",
						validate : function(value) {
							   if (!value) return '【显示名称】不能为空';
						}
					}
                },{
                    field: 'sfxs',
                    title: '是否显示',
                    editable : {
						type : 'select',
						title : '是否显示',
						source: [{ value: 1, text: "显示" }, { value: 0, text: "不显示" }],
						mode: "inline",
						validate : function(value) {
							   if (!value) return '【是否显示】不能为空';
						}
					}
                    
                },{
                    field: 'sjlx',
                    title: '数据类型',
                    editable : {
						type : 'select',
						title : '数据类型',
						source: [{ value: 0, text: "年初结余" }, { value: 1, text: "本月贷方" },{ value: 2, text: "本年贷方" }, 
							{ value: 3, text: "本月借方" }, { value: 4, text: "本年借方" },{ value: 5, text: "本季贷方" },
							{ value: 6, text: "本季借方" },{ value: 7, text: "公式"} ],
						mode: "inline",
						validate : function(value) {
							   if (!value) return '【数据类型】不能为空';
						}
					}
                },{
                    field: 'rule',
                    title: '公式',
					editable : {
						type : 'text',
						title : '公式',
						emptytext : "录入公式",
						mode: "inline",
						validate : function(value) {
							   if (!value) return '【公式】不能为空';
						}
					}
                },]
	        };
	        $.table.init(options);
	    }); 
        
        /* 新增表格行 */
	    function insertRow(){
	    	var data=$("#" + table.options.id).bootstrapTable('getData');
	    	var xh=data.length+1;
	    	var row={
	    			xh:xh,
	    			xsmc: '',
	    			sfxs: '1',
	    			sjlx: '0',
	    			rule: ''
	    			
	            }
	    	$("#" + table.options.id).bootstrapTable('append', row)
	    	var data=$("#" + table.options.id).bootstrapTable('getData');
	    	for (var i=0;i<data.length;i++){
		    	   var rowids = {
	            		   index : i, //更新列所在行的索引
	            		   field : "xh", //要更新列的field
	            		   value : i+1 //要更新列的数据
	            		   }//更新表格数据 
	               $("#" + table.options.id).bootstrapTable("updateCell",rowids);
		    	
		    }
	    }
	    /* 删除指定表格行 */
	    function removeRow(){
	    	var xhs = $.table.selectColumns("xh");
	    	if (xhs.length == 0) {
				$.modal.alertWarning("请至少选择一条记录");
				return;
			}
	    	$("#" + table.options.id).bootstrapTable('remove', {
	    	    field: 'xh',
	    	    values: xhs
	    	})
	    }
	    
    </script>
</body>
</html>